<template>
	<div class="login-wrapper">
		<div class="login-icon">
			<img src="@/assets/login/logo.jpg">
		</div>

		<div class="menu-wrapper base-flex base-rows base-align-items-center">
			<div class="choose-language">
				<a-dropdown>
					<template #overlay>
						<a-menu v-model:selectedKeys="lang" @click="handleMenuClick">
							<a-menu-item :key="item.value" v-for="(item, index) in langList">{{ item.name }}
							</a-menu-item>
						</a-menu>
					</template>
					<GlobalOutlined style="font-size: 18px; color: #fff;" />
				</a-dropdown>
			</div>
			<a href="javascript:void(0)">Home</a>
			<a href="javascript:void(0)">About Us</a>
			<a href="javascript:void(0)">Contact Us</a>
			<a href="javascript:void(0)" class="active">Login</a>
		</div>
		<div class="right-card">

			<!--      <div class="base-f20 base-text-center base-mb20">{{ $t('self.login.title') }}</div>-->
			<div class="password-login-form">
				<a-form :model="formState2" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" autocomplete="off"
					@finish="onFinish" @finishFailed="onFinishFailed">
					<a-form-item label="" name="name" :rules="[{ required: true, message: $t('self.login.tips1') }]">
						<a-input allow-clear v-model:value="formState2.name" :placeholder="$t('self.login.tips2')">
							<template #prefix>
								<UserOutlined style="color: rgba(255, 255, 255, 0.7)" />
							</template>
						</a-input>
					</a-form-item>
					<a-form-item label="" name="pwd" :rules="[{ required: true, message: $t('self.login.tips3') }]"
						class="base-mb40">
						<a-input-password v-model:value="formState2.pwd" :placeholder="$t('self.login.tips4')">
							<template #prefix>
								<LockOutlined style="color: rgba(255, 255, 255, 0.7)" />
							</template>
							<template #iconRender="v">
								<EyeTwoTone style="color: rgba(255, 255, 255, 0.7)" v-if="v"></EyeTwoTone>
								<EyeInvisibleOutlined style="color: rgba(255, 255, 255, 0.7)" v-else>
								</EyeInvisibleOutlined>
							</template>
						</a-input-password>

						<!--            <a-input-password v-model:value="formState2.pwd" :placeholder="$t('self.login.tips4')">-->
						<!--              <template #prefix>-->
						<!--                <LockOutlined style="color: rgba(255, 255, 255, 0.7)"/>-->
						<!--              </template>-->
						<!--            </a-input-password>-->
					</a-form-item>
					<!--          <a-form-item name="remember" class="base-mb40">-->
					<!--            <a-row>-->
					<!--              <a-col span="12">-->
					<!--                <a-checkbox v-model:checked="formState2.remember">{{ $t('self.login.tips8') }}</a-checkbox>-->
					<!--              </a-col>-->
					<!--              <a-col span="12" class="base-text-right forget-password">{{ $t('self.login.tips9') }}</a-col>-->
					<!--            </a-row>-->
					<!--          </a-form-item>-->
					<a-form-item>
						<a-button type="primary" html-type="submit" :loading="btnLoading" block class="submit-btn">
							{{ $t('self.login.loginText') }}</a-button>
					</a-form-item>
					<!--          <div class="base-text-center">-->
					<!--            {{ $t('self.login.tips10') }}<a href="">《{{ $t('self.login.tips11') }}》</a>{{ $t('self.and') }}<a href="">《{{ $t('self.login.tips12') }}》</a>-->
					<!--          </div>-->
				</a-form>

			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		inject,
		ref
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		mainStore
	} from '@/stores/mainStore'
	import {
		userStore
	} from '@/stores/userStore'
	import {
		message
	} from 'ant-design-vue'

	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $CONFIG = proxy.$CONFIG
	const $API = proxy.$API

	const useMainStore = mainStore()
	const useUserStore = userStore()
	const route = useRoute()
	const router = useRouter()

	const lang = ref([$TOOL.data.get('APP_LANG') || $CONFIG.LANG])
	const langList = ref([{
			name: 'Chinese',
			value: 'zh-cn',
		},
		{
			name: 'English',
			value: 'en-us',
		},
		{
			name: 'Kinyarwanda',
			value: 'lwd',
		}
	])

	const formState2 = ref({
		name: '',
		pwd: '',
	})
	const btnLoading = ref(false)

	const handleMenuClick = (e) => {
		const language = e.key
		proxy.$i18n.locale = useMainStore.lang = language
		lang.value = [language]
		// console.log('设置当前语言', proxy.$i18n.locale)
		$TOOL.data.set("APP_LANG", language)
	}

	const onFinish = (values) => {
		btnLoading.value = true

		// // 模拟用户资料
		// const res = {
		//   data: {
		//     tokeninfo: { token: 12345 },
		//     userinfo: {
		//       id: 1,
		//       nickname: '测试用户',
		//       username: formState2.value.name,
		//       role: ['user']  // 必填项
		//     },
		//   }
		// }

		$API.common.login.post(formState2.value).then(res => {
			//   console.log(res)
			const {
				objData
			} = res
			const token = objData.authToken
			const userInfo = objData.userData


			// 关键1：从 userInfo.menus 提取用户可访问的菜单ID（即权限标识）
			// 假设 userInfo.menus 格式是 [{id: '7001', ...}, {id: '1001', ...}]
			const userPermissions = userInfo.menus?.map(menu => menu.id) || [];
			// 补充基础角色 'user'（路由配置中很多路由包含 'user' 角色）
			userPermissions.push('user');
			// 将权限列表存入 userInfo，供 Pinia 存储
			userInfo.role = userPermissions;


			// 用ID来作为权限
			const permissionList = $TOOL.array.getColumn(userInfo.menus, 'id')

			$TOOL.cookie.set($CONFIG.TOKEN_KEY, token, {
				// expires: formEl.value.autologin? 24*60*60 : 0
				expires: 24 * 60 * 60 * 2
			})
			// 直接提交登录保存数据
			useUserStore.login(userInfo).then((res) => {
				message.success('登录成功', res)
				// proxy.getOrgSelectList(true) // 缓存运营商数据

				// 存储用户权限
				$TOOL.data.set($CONFIG.PERMISSIONS_KEY, permissionList)
				router.replace({
					path: '/'
				})
			})
			$TOOL.data.set("USERID", userInfo.id)

		}).catch(err => {
			btnLoading.value = false
			message.error(err.msg)
		})

	}

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo)
	}
</script>

<style lang="scss" scoped>
	.login-wrapper {
		width: 100%;
		height: 100vh;
		background: url("@/assets/login/bg2.jpg") no-repeat;
		background-position: bottom center;
		background-size: 100% auto;
		background-color: #000;

		.login-icon {
			width: 338px;
			//height: 620px;
			cursor: pointer;
			position: fixed;
			left: 10%;
			top: 0px;

			//transform: translateY(-50%);
			img {
				width: 150px;
				height: auto;
				min-height: 40px;
			}
		}

		.menu-wrapper {
			position: absolute;
			right: 10%;
			top: 4%;

			.choose-language {
				margin-right: 15px;
			}

			a {
				display: block;
				color: #ffffff;
				padding: 10px 20px;
				font-style: normal;
				font-size: 16px;
				text-decoration: none;
				border-radius: 20px;

				&.active {
					background: $primaryColor;
					color: #fff;
				}
			}
		}

		.right-card {
			position: fixed;
			width: 480px;
			//height: 620px;
			padding-top: 50px;
			padding-bottom: 52px;
			box-sizing: border-box;
			border-radius: 20px;
			left: 35%;
			top: 15%;
			//transform: translateY(-50%);
			//background: #fff;
			//box-shadow: 0 4px 20px 0 rgba(0, 54, 128, .08);

			.choose-language {
				position: absolute;
				right: 0;
				top: 5%;
			}

			:deep(.tabs) {
				.ant-tabs-nav:before {
					border-width: 0;
				}

				.ant-tabs-tab {
					padding: 0 0 10px 0;

					.ant-tabs-tab-btn {
						font-size: 20px;
						letter-spacing: 0;
						color: rgba(17, 31, 44, .6);
					}

					&.ant-tabs-tab-active {
						.ant-tabs-tab-btn {
							color: #111f2c;
							font-weight: 600;
						}
					}
				}

				.ant-tabs-ink-bar {
					background: none;
					display: flex;
					justify-content: center;
					height: 14px;

					&:after {
						position: relative;
						bottom: 0;
						display: block;
						content: '';
						width: 30px;
						height: 4px;
						border-radius: 2px;
						background-color: $primaryColor;
						margin-top: 10px;
						transition: transform .3s cubic-bezier(.645, .045, .355, 1), width .3s cubic-bezier(.645, .045, .355, 1), left .3s cubic-bezier(.645, .045, .355, 1);
					}
				}
			}

			.code-login-form,
			.password-login-form {
				padding: 8px 40px;

				:deep(.ant-form) {
					//min-height: 373px;
					color: rgba(0, 0, 0, .65);
					font-size: 13px;
					font-variant: tabular-nums;
					line-height: 1.5;
					list-style: none;
					font-feature-settings: "tnum";

					.ant-form-item {
						margin-bottom: 16px;
						color: #c9c9c9;

						.ant-input {
							//background: #f2f4f9;
							background: transparent;
							//color: #111f2c;
							color: #ffffff;
							border-radius: 2px;
							height: 50px;
							font-size: 16px;
							border: none;
							outline: none;

							&::placeholder {
								color: #c9c9c9;
							}
						}

						.ant-input-affix-wrapper {
							//background: #f2f4f9;
							background: transparent;
							border: 1px solid #fff;
							border-radius: 35px;
							color: #fff;
						}

						.ant-select {
							.ant-select-selector {
								height: 58px;
								background: #f2f4f9;
								border: none;
								outline: none;
								box-shadow: none;
								border-radius: 2px 0 0 2px;

								.ant-select-selection-search-input {
									height: 58px;
								}

								.ant-select-selection-item {
									height: 58px;
									line-height: 58px;
								}
							}
						}

						.ant-checkbox-wrapper,
						.forget-password {
							color: rgba(17, 31, 44, .4);
						}

						.forget-password {
							&:hover {
								color: $primaryColor;
							}
						}

						.verify-btn {
							height: 50px;
							line-height: 50px;
							color: #b6babf;
							cursor: pointer;

							&.countdown {
								color: $primaryColor;
							}
						}

						.submit-btn {
							width: 80%;
							height: 50px;
							font-size: 16px;
							color: #fff;
							background: #27b32e;
							border-radius: 35px;
							margin: 0 10%;
						}
					}
				}
			}

			.scan-login-form {
				padding: 8px 80px 0;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.88);
				line-height: 1.5;

				.title {
					font-size: 20px;
					letter-spacing: 0;
					//color: rgba(17,31,44,.6);
					color: #111f2c;
					font-weight: 600;
				}

				.content {
					min-height: 370px;
				}

				img {
					width: 80%;
				}

				a {
					color: #155bd4;
					text-decoration: none;
					background-color: transparent;
					outline: none;
					cursor: pointer;
					transition: color 0.3s;
				}
			}
		}


	}

	//@media screen and (max-width: 1920px) {
	//  .login-wrapper {
	//    .login-icon {
	//      left: 20% !important;
	//    }
	//
	//    .right-card {
	//      right: 20% !important;
	//    }
	//  }
	//}
	//
	//
	//@media screen and (max-width: 1440px) {
	//  .login-wrapper {
	//    .login-icon {
	//      left: 15% !important;
	//    }
	//
	//    .right-card {
	//      right: 15% !important;
	//    }
	//  }
	//}
</style>
